<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>24 本科 3 班 李育松 的网站！</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }

        body {
            background-color: #ffffff;
            color: #333;
            line-height: 1.6;
        }

        /* 头部样式 - 调整为白色主题，固定定位，带有阴影效果 */
        header {
            background: #ffffff;
            color: #333;
            padding: 10px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid #eee;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* 校徽和校名样式 */
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-image {
            width: 80px;
            /* 增大容器宽度 */
            height: 80px;
            /* 增大容器高度 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-image img {
            height: 70px;
            width: auto;
            border-radius: none;
            padding: 3px;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo h1 {
            font-size: 26px;
            font-weight: bold;
            color: #1a5fb4;
            line-height: 1.2;
        }

        .logo span {
            color: #ff6b00;
        }

        .logo .subtitle {
            font-size: 14px;
            color: #666;
            font-weight: normal;
            margin-top: 3px;
        }

        /* 导航菜单样式 */
        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            position: relative;
        }

        nav ul li a {
            display: block;
            padding: 15px 20px;
            color: #333;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        nav ul li a:hover {
            background: rgba(26, 95, 180, 0.1);
            color: #1a5fb4;
        }

        /* 二级菜单样式，初始隐藏，鼠标悬停时显示 */
        .submenu {
            position: absolute;
            top: 100%;
            left: 0;
            background: #ffffff;
            width: 200px;
            list-style: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #eee;
            z-index: 1000;
        }

        nav ul li:hover .submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .submenu li a {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            color: #555;
        }

        .submenu li a:hover {
            background: #f5f8ff;
            color: #1a5fb4;
        }

        .submenu li:last-child a {
            border-bottom: none;
        }

        /* 轮播图样式 */
        .slider {
            height: 450px;
            overflow: hidden;
            position: relative;
            margin: 20px 0 30px;
            border: 1px solid #ddd;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
        }

        .slides {
            display: flex;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .slide {
            min-width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            padding: 0 50px;
        }

        .slide-content {
            max-width: 600px;
            background: rgba(255, 255, 255, 0.85);
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .slide-content h2 {
            font-size: 38px;
            margin-bottom: 15px;
            color: #1a5fb4;
        }

        .slide-content p {
            font-size: 18px;
            margin-bottom: 20px;
            color: #444;
        }

        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 10px 25px;
            background: #ff6b00;
            color: white;
            text-decoration: none;
            font-weight: bold;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: #e65c00;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(230, 92, 0, 0.3);
        }

        /* 轮播图导航点和按钮样式 */
        .slider-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .slider-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #ccc;
        }

        .slider-dot.active {
            background: #1a5fb4;
            transform: scale(1.2);
            border: none;
        }

        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.7);
            color: #1a5fb4;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: all 0.3s ease;
            border-radius: 50%;
            border: 1px solid #eee;
        }

        .slider-btn:hover {
            background: rgba(255, 255, 255, 0.9);
            color: #ff6b00;
        }

        .prev-btn {
            left: 20px;
        }

        .next-btn {
            right: 20px;
        }

        /* 主要内容区域样式 */
        .section {
            margin: 40px 0;
        }

        .section-title {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            position: relative;
        }

        .section-title h2 {
            font-size: 32px;
            color: #1a5fb4;
            display: inline-block;
            position: relative;
            padding-bottom: 10px;
        }

        /* 标题下划线装饰 */
        .section-title h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: #ff6b00;
            border-radius: 2px;
        }

        /* 特色优势卡片网格布局 */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .feature-card {
            background: white;
            padding: 30px 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .feature-card i {
            font-size: 48px;
            color: #1a5fb4;
            margin-bottom: 20px;
            display: block;
            text-align: center;
        }

        .feature-card h3 {
            margin-bottom: 15px;
            color: #1a5fb4;
            text-align: center;
            font-size: 22px;
        }

        /* 新闻公告区域样式 */
        .news-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .news-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            border: 1px solid #f0f0f0;
        }

        .news-header {
            background: #1a5fb4;
            color: white;
            padding: 15px 20px;
            font-size: 20px;
            font-weight: bold;
        }

        .news-list {
            padding: 20px;
        }

        .news-item {
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: flex-start;
        }

        .news-item:last-child {
            border-bottom: none;
        }

        .news-item a {
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
            display: block;
            flex: 1;
        }

        .news-item a:hover {
            color: #1a5fb4;
            text-decoration: underline;
        }

        .news-date {
            font-size: 14px;
            color: #666;
            margin-right: 15px;
            min-width: 80px;
            padding-top: 3px;
        }

        /* 统计数据卡片样式 */
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .stat-card {
            text-align: center;
            padding: 30px 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
        }

        .stat-number {
            font-size: 42px;
            font-weight: bold;
            color: #1a5fb4;
            margin-bottom: 10px;
        }

        .stat-text {
            font-size: 18px;
            color: #555;
        }

        /* 院系展示卡片样式 */
        .departments {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }

        .dept-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .dept-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .dept-img {
            height: 180px;
            background-size: cover;
            background-position: center;
        }

        .dept-content {
            padding: 20px;
        }

        .dept-content h3 {
            color: #1a5fb4;
            margin-bottom: 15px;
            font-size: 20px;
        }

        .dept-content p {
            color: #666;
            margin-bottom: 15px;
        }

        .dept-content a {
            display: inline-block;
            color: #ff6b00;
            text-decoration: none;
            font-weight: bold;
        }

        /* 其他页面导航区域样式 */
        .other-pages {
            background: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin: 50px 0;
            border: 1px solid #f0f0f0;
        }

        .other-pages h2 {
            text-align: center;
            color: #1a5fb4;
            margin-bottom: 30px;
            font-size: 28px;
            position: relative;
            padding-bottom: 15px;
        }

        .other-pages h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: #ff6b00;
            border-radius: 2px;
        }

        .pages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .page-card {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid #eee;
        }

        .page-card:hover {
            background: #f5f8ff;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .page-card i {
            font-size: 36px;
            color: #1a5fb4;
            margin-bottom: 15px;
            display: block;
        }

        .page-card h3 {
            margin-bottom: 10px;
            color: #1a5fb4;
        }

        .page-card a {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 15px;
            background: #1a5fb4;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .page-card a:hover {
            background: #ff6b00;
        }

        /* 页脚样式 */
        footer {
            background: #1a5fb4;
            color: white;
            padding: 40px 0 20px;
            margin-top: 50px;
        }

        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-col h3 {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #ffcc00;
            font-size: 22px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: #e0e0e0;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .footer-links a:hover {
            color: white;
            padding-left: 5px;
        }

        .contact-info {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }

        .contact-info i {
            margin-right: 10px;
            margin-top: 5px;
            color: #ffcc00;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid #2c6bb8;
            color: #c0d4f0;
            font-size: 16px;
        }

        /* 响应式设计 - 中等屏幕 */
        @media (max-width: 992px) {
            .slide-content h2 {
                font-size: 32px;
            }
        }

        /* 响应式设计 - 小屏幕 */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                gap: 15px;
            }

            nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }

            .slide {
                padding: 0 20px;
                text-align: center;
            }

            .slide-content {
                margin: 0 auto;
            }

            .slide-content h2 {
                font-size: 28px;
            }

            .section-title h2 {
                font-size: 26px;
            }

            .other-pages {
                padding: 20px;
            }

            .logo {
                flex-direction: column;
                text-align: center;
                gap: 8px;
            }

            .logo-image {
                margin-bottom: 5px;
            }
        }

        /* 响应式设计 - 超小屏幕 */
        @media (max-width: 480px) {
            .slide-content {
                padding: 15px;
            }

            .slide-content h2 {
                font-size: 24px;
            }

            .slide-content p {
                font-size: 16px;
            }

            .btn {
                padding: 8px 20px;
            }
        }
    </style>
</head>

<body>
    <!-- 头部导航区域 -->
    <header>
        <div class="container header-container">
            <div class="logo">
                <div class="logo-image">
                    <!-- 校徽图片位置 -->
                    <img src="./img/sdlogo.png" alt="山河大学Logo">
                </div>

            </div>

            <!-- 主导航菜单，包含二级下拉菜单 -->
            <nav>
                <ul>
                    <li><a href="index2.html" style="background: #f0f7ff; color: #1a5fb4;">首页</a></li>
                    <li>
                        <a href="#">学校概况 <i class="fas fa-chevron-down"></i></a>
                        <ul class="submenu">
                            <li><a href="about.html">学校简介</a></li>
                            <li><a href="history.html">历史沿革</a></li>
                            <li><a href="leadership.html">领导团队</a></li>
                            <li><a href="campus.html">校园风光</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">教育教学 <i class="fas fa-chevron-down"></i></a>
                        <ul class="submenu">
                            <li><a href="programs.html">本科教育</a></li>
                            <li><a href="graduate.html">研究生教育</a></li>
                            <li><a href="faculty.html">师资队伍</a></li>
                            <li><a href="lab.html">实验中心</a></li>
                        </ul>
                    </li>
                    <li><a href="list.html">新闻公告</a></li>
                    <li><a href="#">科学研究</a></li>
                    <li><a href="#">招生就业</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 轮播图区域，展示学校主要宣传内容 -->
    <div class="container">
        <div class="slider">
            <div class="slides">
                <div class="slide"
                    style="background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), url('./img/909.png');">
                    <div class="slide-content">
                        <h2>山河大学欢迎您</h2>
                        <p>厚德博学，求是创新，培养担当民族复兴大任的时代新人</p>
                        <a href="#" class="btn">了解更多</a>
                    </div>
                </div>
                <div class="slide"
                    style="background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), url('./img/108.png');">
                    <div class="slide-content">
                        <h2>2023年本科招生进行中</h2>
                        <p>面向全国31个省、市、自治区招收优秀高中毕业生</p>
                        <a href="#" class="btn">查看招生简章</a>
                    </div>
                </div>
                <div class="slide"
                    style="background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), url('./img/416.png');">
                    <div class="slide-content">
                        <h2>国际交流与合作</h2>
                        <p>与全球50多所知名高校建立合作关系，拓展学生国际视野</p>
                        <a href="#" class="btn">国际合作项目</a>
                    </div>
                </div>
            </div>
            <!-- 轮播图导航按钮 -->
            <div class="slider-btn prev-btn"><i class="fas fa-chevron-left"></i></div>
            <div class="slider-btn next-btn"><i class="fas fa-chevron-right"></i></div>
            <!-- 轮播图指示点 -->
            <div class="slider-nav">
                <div class="slider-dot active"></div>
                <div class="slider-dot"></div>
                <div class="slider-dot"></div>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container">
        <!-- 特色与优势部分 -->
        <div class="section">
            <div class="section-title">
                <h2>特色与优势</h2>
            </div>
            <div class="features">
                <div class="feature-card">
                    <i class="fas fa-user-graduate"></i>
                    <h3>人才培养</h3>
                    <p>坚持立德树人，构建"通识教育+专业教育+创新创业教育"三位一体人才培养体系，培养高素质创新型人才。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-flask"></i>
                    <h3>学科建设</h3>
                    <p>拥有12个一级学科博士学位授权点，5个国家重点学科，8个学科进入ESI全球前1%。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-globe-asia"></i>
                    <h3>国际合作</h3>
                    <p>与哈佛、剑桥等世界一流大学建立合作关系，开展学生交流、联合培养、科研合作等项目。</p>
                </div>
            </div>
        </div>

        <!-- 新闻公告部分 -->
        <div class="section">
            <div class="section-title">
                <h2>新闻公告</h2>
            </div>
            <div class="news-container">
                <div class="news-card">
                    <div class="news-header">
                        <h3>校园新闻</h3>
                    </div>
                    <div class="news-list">
                        <div class="news-item">
                            <div class="news-date">2023-10-15</div>
                            <a href="content.html">我校学生在"挑战杯"全国大学生课外学术科技作品竞赛中荣获特等奖</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-10-12</div>
                            <a href="#">山河大学2023年秋季运动会隆重开幕</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-10-08</div>
                            <a href="#">我校与华为技术有限公司签署战略合作协议</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-10-05</div>
                            <a href="#">中国科学院院士张伟教授受聘为我校特聘教授</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-10-01</div>
                            <a href="#">山河大学举行庆祝中华人民共和国成立74周年升旗仪式</a>
                        </div>
                    </div>
                </div>

                <div class="news-card">
                    <div class="news-header">
                        <h3>通知公告</h3>
                    </div>
                    <div class="news-list">
                        <div class="news-item">
                            <div class="news-date">2023-10-14</div>
                            <a href="#">关于2023-2024学年寒假放假安排的通知</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-10-10</div>
                            <a href="#">关于开展2023年度专业技术职务评聘工作的通知</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-10-07</div>
                            <a href="#">关于举办"山河杯"大学生创新创业大赛的通知</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-10-03</div>
                            <a href="#">图书馆关于调整冬季开放时间的通知</a>
                        </div>
                        <div class="news-item">
                            <div class="news-date">2023-09-28</div>
                            <a href="#">2023年国家奖学金评选工作正式启动</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 学校统计数据部分 -->
        <div class="section">
            <div class="section-title">
                <h2>学校数据</h2>
            </div>
            <div class="stats">
                <div class="stat-card">
                    <div class="stat-number">25,000+</div>
                    <div class="stat-text">在校学生</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">2,800+</div>
                    <div class="stat-text">教职员工</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">86</div>
                    <div class="stat-text">本科专业</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">150+</div>
                    <div class="stat-text">国际合作院校</div>
                </div>
            </div>
        </div>

        <!-- 院系设置展示部分 -->
        <div class="section">
            <div class="section-title">
                <h2>院系设置</h2>
            </div>
            <div class="departments">
                <div class="dept-card">
                    <div class="dept-img" style="background-image: url('./img/515.png');"></div>
                    <div class="dept-content">
                        <h3>文学院</h3>
                        <p>设有汉语言文学、历史学、哲学等专业，培养人文素养深厚的高素质人才。</p>
                        <a href="#">了解更多 &raquo;</a>
                    </div>
                </div>
                <div class="dept-card">
                    <div class="dept-img" style="background-image: url('./img/ppp.png');"></div>
                    <div class="dept-content">
                        <h3>理工学院</h3>
                        <p>拥有数学、物理、化学等优势学科，注重基础理论研究与应用创新。</p>
                        <a href="#">了解更多 &raquo;</a>
                    </div>
                </div>
                <div class="dept-card">
                    <div class="dept-img" style="background-image: url('./img/99.png');"></div>
                    <div class="dept-content">
                        <h3>工程学院</h3>
                        <p>涵盖机械工程、电子信息、计算机科学等工科专业，培养卓越工程师。</p>
                        <a href="#">了解更多 &raquo;</a>
                    </div>
                </div>
                <div class="dept-card">
                    <div class="dept-img" style="background-image: url('./img/一元.png');"></div>
                    <div class="dept-content">
                        <h3>医学院</h3>
                        <p>拥有临床医学、基础医学、药学等学科，致力于培养高层次医学人才。</p>
                        <a href="#">了解更多 &raquo;</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 其他页面导航区域 -->
        <div class="other-pages">
            <h2>其他页面导航</h2>
            <div class="pages-grid">
                <div class="page-card">
                    <i class="fas fa-list"></i>
                    <h3>列表页面</h3>
                    <p>浏览校园新闻与通知公告</p>
                    <a href="list.html">访问列表页面</a>
                </div>
                <div class="page-card">
                    <i class="fas fa-tasks"></i>
                    <h3>任务管理</h3>
                    <p>管理您的待办事项</p>
                    <a href="toDoList.html">访问任务管理</a>
                </div>
                <div class="page-card">
                    <i class="fas fa-users"></i>
                    <h3>团队介绍</h3>
                    <p>了解网站开发团队</p>
                    <a href="group.html">访问团队页面</a>
                </div>
                <div class="page-card">
                    <i class="fas fa-images"></i>
                    <h3>作品展示</h3>
                    <p>查看学生作品集</p>
                    <a href="works.html">访问作品展示</a>
                </div>
                <div class="page-card">
                    <i class="fas fa-user-plus"></i>
                    <h3>注册页面</h3>
                    <p>创建您的校园账号</p>
                    <a href="register.html">立即注册</a>
                </div>
                <div class="page-card">
                    <i class="fas fa-sign-in-alt"></i>
                    <h3>登录页面</h3>
                    <p>访问您的个人账户</p>
                    <a href="login.html">用户登录</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚区域，包含学校信息和链接 -->
    <footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>关于我们</h3>
                    <p>山河大学是一所以"厚德博学、求是创新"为校训的综合性大学，致力于培养德智体美劳全面发展的社会主义建设者和接班人。</p>
                </div>
                <div class="footer-col">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="index.html">学校首页</a></li>
                        <li><a href="about.html">学校简介</a></li>
                        <li><a href="admission.html">招生信息</a></li>
                        <li><a href="employment.html">就业服务</a></li>
                        <li><a href="list.html">新闻公告</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>联系我们</h3>
                    <div class="contact-info">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>山河省山河市山河大道100号</span>
                    </div>
                    <div class="contact-info">
                        <i class="fas fa-phone"></i>
                        <span>招生咨询: 0123-4567890</span>
                    </div>
                    <div class="contact-info">
                        <i class="fas fa-envelope"></i>
                        <span>邮箱: admission@shu.edu.cn</span>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 山河大学 版权所有 | 山河ICP备12345678号-1</p>
            </div>
        </div>
    </footer>

    <script>
        // 轮播图功能实现
        document.addEventListener('DOMContentLoaded', function () {
            const slides = document.querySelector('.slides');
            const slideItems = document.querySelectorAll('.slide');
            const dots = document.querySelectorAll('.slider-dot');
            const prevBtn = document.querySelector('.prev-btn');
            const nextBtn = document.querySelector('.next-btn');

            let currentIndex = 0;
            const slideCount = slideItems.length;
            const slideWidth = slideItems[0].clientWidth;

            // 设置轮播图初始位置
            slides.style.transform = `translateX(${-currentIndex * slideWidth}px)`;

            // 更新指示点状态
            function updateDots() {
                dots.forEach((dot, index) => {
                    dot.classList.toggle('active', index === currentIndex);
                });
            }

            // 切换到指定索引的幻灯片
            function goToSlide(index) {
                if (index < 0) {
                    index = slideCount - 1;
                } else if (index >= slideCount) {
                    index = 0;
                }

                slides.style.transform = `translateX(${-index * slideWidth}px)`;
                currentIndex = index;
                updateDots();
            }

            // 下一张幻灯片
            function nextSlide() {
                goToSlide(currentIndex + 1);
            }

            // 上一张幻灯片
            function prevSlide() {
                goToSlide(currentIndex - 1);
            }

            // 自动轮播功能
            let slideInterval = setInterval(nextSlide, 5000);

            // 鼠标悬停时暂停自动轮播
            const slider = document.querySelector('.slider');
            slider.addEventListener('mouseenter', () => {
                clearInterval(slideInterval);
            });

            slider.addEventListener('mouseleave', () => {
                slideInterval = setInterval(nextSlide, 5000);
            });

            // 添加按钮和指示点的点击事件
            nextBtn.addEventListener('click', nextSlide);
            prevBtn.addEventListener('click', prevSlide);

            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    goToSlide(index);
                });
            });

            // 初始化轮播图
            updateDots();
        });
    </script>
</body>

</html>